{% extends 'base/header.html' %}


{% block title %}
    登录
{% endblock %}

{% block header %}
        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
        <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
        <script src="{% static 'bootstrap/css/sign-in.css' %}"></script>
        <link rel="stylesheet" href="{% static 'bootstrap/css/base.css' %}">
        <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
        <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
        <style>
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }

            .b-example-divider {
                height: 3rem;
                background-color: rgba(0, 0, 0, .1);
                border: solid rgba(0, 0, 0, .15);
                border-width: 1px 0;
                box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
            }

            .b-example-vr {
                flex-shrink: 0;
                width: 1.5rem;
                height: 100vh;
            }

            .bi {
                vertical-align: -.125em;
                fill: currentColor;
            }

            .nav-scroller {
                position: relative;
                z-index: 2;
                height: 2.75rem;
                overflow-y: hidden;
            }

            .nav-scroller .nav {
                display: flex;
                flex-wrap: nowrap;
                padding-bottom: 1rem;
                margin-top: -1px;
                overflow-x: auto;
                text-align: center;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
        </style>
{% endblock %}

{% block body %}
    <main class="form-signin w-50 m-auto">
        <form method="post">
{#            <img class="mb-4" src="{% static 'bootstrap/images/1733735937830.jpg' %}" alt="" width="72" height="57">#}
            <h1 class="h3 mb-3 fw-normal">请登录</h1>

            <div class="form-floating">
                <input type="text" class="form-control" id="floatingInput" name="username" placeholder="name@example.com">
                <label for="floatingInput">账号</label>
            </div>
          
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingPassword"  name="password" placeholder="Password">
                <label for="floatingPassword">密码</label>
            </div>

            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" value="1" name="remember"/>记住我
                </label>
            </div>
            <h1 style="color: red">
                {{ msg }}
            </h1>
            <button class="w-100 btn btn-lg btn-primary" type="submit">登录</button>
        </form>
    </main>
{% endblock %}